<template>
  <view class="owner">
    <view class="head">
      <view class="title">我的</view>
      <uni-icons type="gear" size="40" color="white"></uni-icons>
    </view>
    <view class="middle" >
      <image src="../../static/WoDEBG.png" mode="scaleToFill" />
      <view class="account" >
        <image src="../../static/MorenTx.png" mode="scaleToFill" />
        <view class="account-item" >
          <view>CSKEISLKD</view>
          <view>ID:52897868</view>
        </view>
      </view>
    </view>
    <view class="score" >
      <view class="score-item" v-for="(item,index) in myScoreList" :key="index">
        <view class="item">
          <view>{{item.pointsName}}</view>
          <view class="number">{{item.pointsNum}}</view>
        </view>
       
      </view>
    </view>
  </view>
  <view class="accountServices">
    <view class="accountName">
      <view class="name">账户服务</view>
      <view class="spot"></view>
    </view>
    <view class="accountBox">
      <view class="box" @click="handleScoreDetail">
        <image src="../../static/images/WoDEIcon01.png" mode="aspectFill" />
        <view>积分明细</view>
      </view>
      <view class="box" @click="handleRecord">
        <image src="../../static/images/WoDEIcon02.png" mode="aspectFill" />
        <view>兑换记录</view>
      </view>
      <view class="box" @click="handleMarket">
        <image src="../../static/images/WoDEIcon03.png" mode="aspectFill" />
        <view>我的市场</view>
      </view>
      <view class="box" @click="handleComputed">
        <image src="../../static/images/WoDEIcon04.png" mode="aspectFill" />
        <view>业绩统计</view>
      </view>
      <view class="box" @click="handleLayout">
        <image src="../../static/images/WoDEIcon05.png" mode="aspectFill" />
        <view>贵茶交</view>
      </view>
      <view class="box" @click="handleRealName">
        <image src="../../static/images/WoDEIcon06.png" mode="aspectFill" />
        <view>实名认证</view>
      </view>
    </view>
  </view>

  <CustomTabBar :selected="4" />
</template>

<script setup>
import CustomTabBar from "@/components/customTabBar.vue";
import uniIcons from "@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue";
import { ref } from "vue";
import { apiMyScoreInfo } from "@/api/myScore";
import { onMounted } from "vue";
//跳转积分明细
const handleScoreDetail =() => {
  uni.navigateTo({
    url: "/subPackage/myPage/pointDetails?from=guicha"
  });
};
//跳转贵茶交
const handleLayout = () => {
  uni.navigateTo({
    url: "/subPackage/myPage/guicha"
  });

};
//跳转市场
const handleMarket = () => {
  uni.navigateTo({
    url: "/subPackage/myPage/myMarket"
  });
};
//跳转业绩统计
const handleComputed = () => {
  uni.navigateTo({
    url: "/subPackage/myPage/computedScore"
  });
};
//跳转实名认证
const handleRealName = () => {
  uni.navigateTo({
    url: "/subPackage/myPage/realName?from=realName"
  });
};
//跳转兑换记录
const handleRecord = () => {
  uni.navigateTo({
    url: "/subPackage/myPage/exchangeRecord"
  });
};
const myScoreList = ref([]);
//调用积分接口
const getMyScore = async () => {
  const res = await apiMyScoreInfo({});
  console.log('我的积分信息',res);
myScoreList.value = res.data;
console.log(myScoreList.value);

}
//页面挂载调用
onMounted(() => {
  getMyScore();
});
</script>

<style lang="scss" scoped>
.owner {
  .head {
    width: 100%;
    height: 155rpx;
    background: #5756b3;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .title {
      color: aliceblue;
      font-size: 50rpx;
      text-align: center;
      margin-left: 250rpx;
    }
  }
  .middle {
    margin-top: 20rpx;
    position: relative;
    height: 150rpx;
    width: 100%;
    image {
      width: calc(100% - 80rpx);
      height: 100%;
      margin: 0 40rpx;
      border-top-left-radius: 30rpx;
      border-top-right-radius: 30rpx;
    }
    .account {
      position: absolute;
      top:25rpx;
      left:60rpx;
      display: flex;
      align-items: center;
      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
      }
      .account-item {
        padding-top: 10rpx;
      }
    }
  }
  .score {
    width: calc(100% - 80rpx);
    padding: 20rpx;
    height: 320rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
    margin: 0 20rpx;
     display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    .score-item {
      width:calc( 100% - 20rpx);
      padding: 0 10rpx;
      margin-top: 30rpx;
       display: flex;
       flex-direction: column;
       justify-content: center;
      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;

        text-align: center;
        .number {
          color: chocolate;
          margin-top: 10rpx;
        }
      }
    }
  }
}
.accountServices {
  width: calc(100% - 80rpx);
  padding: 0 20rpx;
  height: 400rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
  margin: 0 20rpx;
  margin-top: 70rpx;
  .accountName {
    padding-top: 30rpx;
    position: relative;
    .name {
      position: absolute;
      top: 10rpx;
      text-align: center;
      width: 200rpx;
    }
    .spot {
      width: 200rpx;
      height: 30rpx;
      background: rgb(231, 192, 120);
    }
  }
  .accountBox {
    padding: 0 30rpx;
    margin-top: 20rpx;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25rpx;
    .box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items:center ;
      image {
        width: 90rpx;
        height: 80rpx;
      }
    }
  }
}
</style>




